{extend name="public:penbase" /}
{block name="header"}
{include file="public/pentop-nav" /}
{/block}
{block name="content"}
<div class="line"></div>

<div class="weui-tab__panel" style="background: #e0e0e0">

    <div class="card-box">
        <p class="text">发送下面的邀请码给好友或其他朋友，注册成功即可成为
            你的推广好友。</p>
    </div>
    <div class="card-box">
        <h2>左区邀请码</h2>
        <p class="code">{$user.left_code}</p>
        <a href="javascript:;" class="invite-btn" data-clipboard-text="{$user.left_code}" >
            <span class="icon invite"></span>
            <span class="invite-text">立即邀请</span>
        </a>
    </div>
    <div class="card-box">
        <h2>右区邀请码</h2>
        <p class="code">{$user.right_code}</p>
        <a href="javascript:;" class="invite-btn" data-clipboard-text="{$user.right_code}">
            <span class="icon invite"></span>
            <span class="invite-text">立即邀请</span>
        </a>
    </div>
</div>

<!--BEGIN toast-->
<div id="toast" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
        <p class="weui-toast__content">复制成功</p>
    </div>
</div>
<!--end toast-->
<script src="__PUBLIC__/pension/js/zepto.min.js"></script>
<script src="__PUBLIC__/pension/js/weui.min.js"></script>
<script src="__PUBLIC__/pension/js/fastclick.min.js"></script>
<script src="__PUBLIC__/pension/js/clipboard.min.js"></script>

<script type="text/javascript">
    $(function() {
        FastClick.attach(document.body);
        var clipboard = new ClipboardJS('.invite-btn');
        clipboard.on('success', function (e) {

            var toast = $('#toast');
            if (toast.css('display') !== 'none') return;
            toast.fadeIn(100);
            setTimeout(function () {
                toast.fadeOut(100);
            }, 2000);
        })
    });

</script>
{/block}
